<!-- /*
 * @Author: 俞明月
 * @Date:   2022-01-30
 * @Last Modified by:   俞明月
 * @Last Modified time: 2022-01-30
 */ -->
<template>
	<div class="ui-mode-container ui-mode-box flex-col">
        <div class="ui-header-item gradient">
            <div class="ui-header-arraw prev" @click="handleHistory" @touchstart.stop>
                <i class="iconfont icon iconjiantou-zuo-cuxiantiao"></i>
            </div>
            <div class="ui-header-title">隐私地址管理</div>
            <div class="ui-header-arraw next flex-row align-center" @touchstart.stop @click="handleHome">
                <i class="iconfont icon iconi-home"></i>
            </div>
        </div>
        <div class="ui-mode-content flex1" ref="scrollPage" v-if="pageStatus">
            <div class="relative" v-if="user_addr_list&&user_addr_list.length">
                <div class="mt-flex-inner mt-address-inner" id="inner">
                    <div class="item"
                        @click="selectAddress(item)"
                        :key="`address-${i}`"
                        v-for="(item,i) in user_addr_list">
                        <div class="mt-address-head">
                            <div class="mt-address-init mar-bottom-5">
                                <p class="m"><span class="mar-right-5">{{item.receive_name}}</span><span class="phone_user">{{item.phone_user}}</span></p>
                                <p class="gray m">{{item.shop_province}} {{item.addr_desc}}</p>
                                <p class="m">保密编码：{{item.secret_code}}</p>
                                <span class="mt-address-btn" :class="item.isPolicy?'':'active'" @click.stop="viewPolicy(i)">查看隐私地址</span>
                            </div>
                            <div class="mt-address-box" :class="item.isPolicy?'hide':''">
                                <p><span class="mar-right-5">{{item.receive_name}}</span>{{item.agent_tel}}</p>
                                <p class="gray m">{{item.secret_addr}}</p>
                                <p class="tip m">为保护您的隐私，可以在淘宝、京东等任意网购平台采用以上隐私地址，我们可以为您代收,短信通知您到店自取。</p>
                            </div>
                            <div class="mt-address-button">
                                <span class="green">{{{0:'默认地址',1:''}[item.is_default_addr]}}</span>
                                <div class="button">
                                    <span class="item mt-edit-address" @click.stop="editAddress(i)">编辑</span>
                                    <span class="item mt-edit-delete" @click.stop="deleteAddress(i)">删除</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
        <div v-if="pageStatus" class="pad-5 mt-address-bottom">
            <div class="gradient mt-item-button" @touchstart.stop @click="addAddr">新增地址</div>
        </div>
    </div>
</template>
<script>
import mixinCommon from '@/views/content/mixins/common';
import mixinRequest from '@/views/content/mixins/request';
export default {
    name: 'my/address',
    data() {
        return {
            public_agent_info:{},
            public_user_info:{},
            user_addr_list:[]
        }
    },
    mixins:[
        mixinCommon,
        mixinRequest,
    ],
    computed:{
    },
    watch:{
        resourceLoaded:{
            handler(flag){
                flag&&this.$nextTick(this.init); 
            },
            immediate:true
        }
    },
    created(){
    },
    mounted(){
    },
    methods:{
        // 初始化
        init(){
            this.getPageInfo({
                name:'my.address',
                param:{
                    invoke_method:'user_addr_list'
                },
                loading:{
                    enabled:true
                }
            }).then(({result,response})=>{
                this.public_agent_info=result.public_agent_info||{};
                this.public_user_info=result.public_user_info||{};
                document.title=this.public_agent_info.application_name;
                this.setState({
                    key:'public_agent_info',
                    value:this.public_agent_info
                });
                this.setState({
                    key:'public_user_info',
                    value:this.public_user_info
                });
                for (let i = 0; i < result.page_content.length; i++) {
                    result.page_content[i].isPolicy=true;
                }
                this.user_addr_list=result.page_content;
            }).catch(({msg})=>{
                this.showMessage(msg);
            });
        },
        selectAddress(item) {
            if (this.$route.query.orderId) {
                if (!item.shop_province && !item.shop_country && !item.shop_city && item.addr_desc === '请更新送货地址') {
                    this.showMessage('请完善收货地址').then(() => {
                        this.$router.push({
                            path: '/my/address/add',
                            query:{
                                type: 1,
                                address_id: item.id_public_user_address,
                                orderId: this.$route.query.orderId
                            }
                        });
                    })
                } else {
                    this.$http.post({
                        name:'common.shopping.pay',
                        data:{
                            invoke_method:'pre_submit_4_order',
                            pre_db_para_id_public_goods_order_record: this.$route.query.orderId,
                            id_public_user_address: item.id_public_user_address
                        },
                        loading:{
                            enabled:false
                        }
                    }).then(({result, response}) => {
                        this.$router.push({
                            path: '/category/shopping',
                            query: {
                                id: this.$route.query.orderId
                            }
                        })
                    }).catch(({msg})=>{
                        this.showMessage(msg);
                    });
                }
            }
        },
        addAddr(){
            if(this.user_addr_list.length>3||this.user_addr_list.length==3){
                this.showToast('亲，最多设置3个收货地址哦！',false);
                return
            }
            this.$router.push({
                path:'/my/address/add',
                query:{
                }
            });
        },
        viewPolicy(i){
            this.user_addr_list[i].isPolicy=!this.user_addr_list[i].isPolicy;
        },
        editAddress(i){
            this.$router.push({
                path:'/my/address/add',
                query:{
                    type: 1,
                    address_id:this.user_addr_list[i].id_public_user_address,
                    orderId:this.$route.query.orderId
                }
            });
        },
        deleteAddress(i){
            var that=this;
            this.$$confirm({
                content:'确定要删除该条地址吗？',
                sureText:'确定',
                cancelText:'取消',
                autoClose:true,
                sure:(node,close)=>{
                    this.$http.post({
                        name:'my.address.delete',
                        data:{
                            invoke_method: 'user_insert_or_update_addr',
                            pre_db_para_id_public_user_address: that.user_addr_list[i].id_public_user_address,
                            is_online:1
                        },
                        loading:{
                            enabled:true
                        }
                    }).then(({result, respone}) => {
                        that.showToast('删除成功',true);
                        that.user_addr_list.splice(i,1)
                    }).catch(({msg})=>{
                        this.showMessage(msg);
                    });
                },
                close:()=>{
                }
            });
        }
    },
    components:{
    },
    beforeDestroy(){
    }
}
</script>
<style lang="less" scoped>
.mt-address-head{
    padding: 0.5rem 0.5rem 0 0.5rem;
    background: #fff;
    margin-bottom: 0.5rem;
    position: relative;
    .mt-address-init{
        position: relative;
        p.m{
            line-height: 1rem;
            font-size: 0.7rem;
            padding: 0.1rem 0;
        }
        .mt-address-btn {
            position: absolute;
            right: 0;
            bottom: 0;
            display: block;
            height: 1.2rem;
            border-radius: 0.2rem;
            padding: 0 0.5rem;
            opacity: 0.9;
            font-size: 0.55rem;
            line-height: 1.2rem;
            color: #fff;
            cursor: pointer;
            text-align: center;
            background: #2398aa;
            &:before {
                content: '';
                display: none;
                bottom: -0.5rem;
                margin-bottom: -1px;
                left: 50%;
                margin-left: -6px;
                position: absolute;
                border: 6px solid transparent;
                border-bottom-color: #f3fef7;
                z-index: 2;
            }
            &.active::before{
                display:block;
            }
            &:after {
                content: '';
                display: none;
                bottom: -0.5rem;
                margin-bottom: -1px;
                left: 50%;
                margin-left: -7px;
                position: absolute;
                border: 7px solid transparent;
                border-bottom-color: #a8edc1;
                z-index: 1;
            }
            &.active::after{
                display:block;
            }
        }
        
    }
    .mt-address-box {
        position: relative;
        margin-bottom: -1px;
        z-index: 2;
        background: #f3fef7;
        padding: 0.3rem 0.5rem 0.5rem;
        border: solid 1px #caefd8;
        p{
            line-height: 1rem;
            font-size: 0.7rem;
            padding: 0.1rem 0;
            &.tip {
                font-size: 0.6rem;
                line-height: 1rem;
                color: #e5590b;
                position: relative;
                padding: 0.1rem 0 0.1rem 0.8rem;
                text-align: justify;
                text-justify: inter-ideograph;
            }
        }
    }
    .mt-address-button {
        border-top: solid 1px #f7f7f7;
        position: relative;
        height: 2.2rem;
        line-height: 2.2rem;
        font-size: 0.7rem;
        .button {
            position: absolute;
            right: 0;
            top: 0;
            .item {
                font-size: 0.7rem;
                margin-left: 1rem;
                color: #9b9b9b;
            }
        }
        
    }
}
.mt-address-bottom {
    box-shadow: 0 0 0.2rem #ddd;
    position: relative;
    z-index: 10;
    .mt-item-button {
        position: relative;
        display: block;
        opacity: 0.9;
        border-radius: 0.2rem;
        height: 2.2rem;
        line-height: 2.2rem;
        font-size: 0.8rem;
        color: #fff;
        cursor: pointer;
        text-align: center;
    }
}
</style>